/***	
* date：2018.03.02
* name: 产品详情页-product的大小图列表切换的模块
* author：hj
* remarks：null
*/
// 左边的产品图片，大小图列表
function goodsImgWrap(_config){
	for(var i in _config){
		this[i]=_config[i];
	}
	this._num = 0;
	this._inx = 0
	this.init();
} 
goodsImgWrap.prototype={
	init:function(){
		var _self = this;
		_self.getData();
	},
	getData:function(){
		var _self = this;
		ajaxFn(APILIST.productImgList,function(_data){
			// 加载到数据时，“正在加载中”，隐藏
			_self.bigImgLoadingId.hide();
			// 初始化大图
			_self.initBigImgWrap(_data);
			// 鼠标进入或移出大图，半透明快显示、隐藏
			_self.mouseEvent();
			// 小图列表
			_self.createDom(_data.smallGoodsList);
			_self.smallImgEvent();
			_self.labelBtnEvent();
			_self.spanBtnEvent();
		});
	},
	// 大图与局部显示图片的初始化
	initBigImgWrap:function(_d){
		var _self = this;
		_self.bigImgId
			.css('dipslay','block')
			.attr('src',_d.bigGoodsImage.imgurl);
		//背景图片初始化 
		_self.localShowImgWrapId.css('background-image','url('+_d.bigGoodsImage.imgurl+')');
	},
	// 鼠标进入或移出大图，半透明快显示、隐藏
	// 局部显示图片框的显示和隐藏
	mouseEvent:function(){
		var _self = this;
		_self.bigGoodsImgId.on({
			mouseover:function(){
				_self.mouseMoveDivId.show();
				// 鼠标移动时触发
				_self.mouseMoveEvent();
				_self.localShowImgWrapId.show();
			},
			mouseout:function(){
				_self.mouseMoveDivId.hide();
				_self.localShowImgWrapId.hide();
			}
		});
	},
	// 鼠标进入大图时调用，触发，移动方法
	mouseMoveEvent:function(){
		var _self = this;
		// e作为形参,保存的是JS事件对象
		_self.bigGoodsImgId.on('mousemove',function(e){
			// console.log(e);
			var _eL = e.pageX;
			var _eT = e.pageY;
			// 获取当前容器，相对于整个网页的xy的坐标值(偏移)
			var _bigGoodsImgIdXY = _self.bigGoodsImgId.offset();
 			// 100是半透明宽高的一半
 			_eL = _eL-_bigGoodsImgIdXY.left-100;
 			_eT = _eT-_bigGoodsImgIdXY.top-100;

 			// 水平方向上，半透明不能超出父容器
 			if(_eL<0){
 				_eL = 0;
 			}else if(_eL>_self.bigGoodsImgId.width()-_self.mouseMoveDivId.width()){
 				_eL = _self.bigGoodsImgId.width()-_self.mouseMoveDivId.width();
 			}
 			// 垂直方向上，半透明不能超出父容器
 			if(_eT<0){
 				_eT = 0;
 			}else if(_eT>_self.bigGoodsImgId.height()-_self.mouseMoveDivId.height()){
 				_eT = _self.bigGoodsImgId.height()-_self.mouseMoveDivId.height();
 			}
 			// 半透明黄块css
			_self.mouseMoveDivId.css({
				'left':_eL,
				'top':_eT
			});
			// 大图局部显示的css
			_self.localShowImgWrapId.css({
				'background-positionX':-(_eL*10/3),
				'background-positionY':-(_eT*10/3)
			})

		});
	}, 
	//构建小图片列表
	createDom:function(_d){
		var _self = this;
		for(var i=0;i<_d.length;i++){
			$('<li/>',{})
				.attr('data-url',_d[i].imgurl)
				.html(function(){
					$('<img/>',{})
						.attr('src',_d[i].imgurl)
						.appendTo($(this));
				})
				.appendTo(_self.smallListId);
		}
	},
	
	 // 小图片点击事件
	smallImgEvent:function(){
		var _self = this;
		var _li   = _self.smallListId.children();

		_li.on('click',function(){
			var _urlData = $(this).attr('data-url');

			_self.bigImgId.attr('src',_urlData);
			
			// // 小图点击，局部图片切换
			_self.localShowImgWrapId.css('background-image','url('+_urlData+')');
			// _self.localShowImgWrapId
			// 	.children().attr('src',_urlData);

		});
	},
	// 左按钮点击事件
	labelBtnEvent:function(){
		var _self = this;
		var _li   = _self.smallListId.children();

		_self.labelId.on('click',function(){
			// 点击左按钮，小图片列表移动
			_self._num++;
			if(_self._num>2){
				_self._num=0;
			}
			_self.smallListId.css('left',40-(_self._num*60));
			// 点击左按钮，大图和放大图切换
			if(_self._inx<2){
				_self._inx++;
			} else {
				_self._inx=0;
			}
			var _imgurl =_li[_self._inx].getAttribute("data-url");
			// 大图切换
			_self.bigImgId.attr('src',_imgurl);
			// 放大图切换
			_self.localShowImgWrapId.css('background-image','url('+_imgurl+')');
		});
	},
	// 右按钮点击事件
	spanBtnEvent:function(){
		var _self = this;
		var _li   = _self.smallListId.children();
		_self.spanId.on('click',function(){
			// 点击右按钮，小图片列表移动
			_self._num--;
			if(_self._num<-6){
				_self._num=0;
			}
			_self.smallListId.css('left',40-(_self._num*60));
			// 点击右按钮，大图和放大图切换
			if(_self._inx>0){
				_self._inx--;
			} else {
				_self._inx=2;
			}
			var _imgurl =_li[_self._inx].getAttribute("data-url");
			// 大图切换
			_self.bigImgId.attr('src',_imgurl);
			// 放大图切换
			_self.localShowImgWrapId.css('background-image','url('+_imgurl+')');
		});
	}
}

new goodsImgWrap({
	bigImgId:$('#bigImgId'),
	bigImgLoadingId:$('#bigImgLoadingId'),
	mouseMoveDivId:$('#mouseMoveDivId'),
	bigGoodsImgId:$('#bigGoodsImgId'),
	localShowImgWrapId:$('#localShowImgWrapId'),
	
	labelId:$('#labelId'),
	smallListId:$('#smallListId'),
	spanId:$('#spanId')
});